github pages：https://rochelwang1205.github.io/sweetie/

github repo：https://github.com/rochelwang1205/sweetie

在寫RWD的時候，使用開發者工具是方便檢查的方法。

至於要如何即時看到寫出來的效果，在VS code可以下載extension”Live Server”。

也要記得在每次更新程式碼要保存才會刷新畫面結果喔! 如果懶得手動儲存、怕忘記存，也可以在VScode中設定auto save。

nav

    .d-mobile-none{
        @include padS{
            display: none;
        }
    }
    .d-desktop-none{
        @include padS-D{
            display: none;
        }
    }

footer

footer{
    background-color: #EAF0ED;
    color: #3F5D45;
    padding: 40px 122px 30px 122px;
    margin: 0 auto;
    @include padS{
        padding-left:10%;
        padding-right: 10%;
    }
    .info{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        .slogan{
            width: 60px;
            @include padS{
                display: none;
            }
        }
        .contact_info{
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            line-height: 1.5;
            font-weight: 400;
            .logo{
                width: 172px;
                @include padS{
                    margin-bottom: 40px;
                }
            }
        }
    }
    .link{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        @include padS{
            flex-direction: column;
        }
        .outside_link{
            width: 32px;
            display: flex;
            gap: 8px;
        @include padS{
            margin-bottom: 24px;
        }
        }
    }
}

💡分享：近期六角學院分享20份可商用得設計稿(真的太佛了)，附上文章連結：https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址)，分享給大家~

參考資料：

1. 甜點店商設計稿(可商用)-吳俊儀：https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid/?fbclid=IwAR1FdRhh7aYFQ67oXv3lO1BfhPr7ScYLrSSB7J83txA2TmTDZHaMJxE8deI

以上實作僅根據此系列提到的部分進行練習，細節沒有完全符合設計稿。請斟酌參考。